<template>
  <div class="tabs">
    <el-tag
        v-for="(item,index) in tabsList"
        :key="item.path"
        :closable="item.name !== 'home'"
        :effect="$route.name === item.name ? 'dark':'plain'"
        @click="changeMenu(item)"
        @close="handleClose(item,index)"
        size="small"
        >
        {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'CommonTag',
    data() {
        return {
            
        }
    },
    computed:{
        ...mapState('tab',['tabsList'])
    },
    methods: {
        // 点击tag跳转的功能
        changeMenu(item){
            this.$router.push({name:item.name})
        },
        // 点击tag删除的功能
        handleClose(item,index){
            // 调用store中的mutation
            this.$store.commit('tab/closeTag',item)
            const length = this.tabsList.length  //因为这里的长度是已经执行过删除后的长度(比原长度少1)所以不需要加1
            // 删除后的跳转逻辑
            if (item.name !== this.$route.name) {
                return
            }
            // 若删除的是最后一项
            if (index === length) {
                this.$router.push({
                    name:this.tabsList[index-1].name  //让它向前跳转
                })
                // 若删除的是中间项
            }else{
                this.$router.push({
                    name:this.tabsList[index].name  //往后跳转  (可以看成后面一项把它原本的位置给替换掉)
                })
            }
        }
    },
}
</script>

<style lang="less" scoped>
    .tabs{
        padding: 20px;
        padding-bottom: 5px;
        .el-tag{
            margin-right: 15px;
            cursor: pointer;
        }
    }
</style>